<template>
	<view class="wrap">
		<view class="invoice_box">
			<view>
				<view class="item" v-for="(item,index) in list">
					<view class="title">
						<view class="name">
							{{item.title}}
						</view>
						<text>税号：{{ item.tax_number }}</text>
					</view>
					<view class="t_btn">
						<view class="items">
							<view v-if="type == 'order'">
								<view v-if="item.is_default == 1">
									<view class="t_check checked"></view> <text class="d_text">默认抬头</text>
								</view>
								<view v-else @click.stop="handleSetDefault(item.invoice_id)">
									<view class="t_check"></view> <text class="d_text">设为默认</text>
								</view>
							</view>

							<view v-if="type == 'checkout'" @click.stop="setInvoice(item)">
								<view class="t_check"></view> <text class="d_text">选择抬头</text>
							</view>


						</view>
						<view class="items">
							<text class="iconfont icon-shanchu" @click="handleDel(item.invoice_id)"></text>
							<text class="iconfont icon-tianxie" @click="handleEdit(item.invoice_id)"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="add_btn">
			<button class="button btn-normal mb30" @click="save_order"  v-if="order_id">提交发票申请</button>
			<button class="button btn-normal gary_bg mb30" @click="setInvoice({})" v-if="type">不开具发票</button>
			<button class="button btn-normal" @click="handleAdd">添加发票抬头</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		COMMON
	} from "../../utils/commom.js"
	import {
		user_invoice_list,
		set_default_invoice,
		del_lnvoice,
		save_order_invoice
	} from "../../api/invoice.js"
	import {
		checkoutInfo
	} from '@/stores/checkout.js';

	const addressStore = checkoutInfo();

	const list = ref([]);
	const type = ref(null); // 下单选择发票标记
	const order_id = ref(null); // 申请开票的订单ID
	const default_invoice = ref({});

	onLoad((option) => {
		type.value = option.type
		order_id.value = option.order_id || null
	})

	onShow(() => {
		get_list();
	});

	// 储存下单选择发票
	function setInvoice(item) {
		addressStore.setInvoice(item);
		uni.navigateBack()
	}



	// 获取列表
	function get_list() {
		user_invoice_list().then(res => {
			list.value = res.data;
			default_invoice.value = res.default;
		})
	}

	// 设为默认
	function handleSetDefault(invoice_id) {
		set_default_invoice(invoice_id).then(res => {
			uni.showToast({
				title: res.msg,
				icon: "none",
				success() {
					setTimeout(function() {
						get_list();
					}, 1000);
				}
			});
		})
	}

	// 删除
	function handleDel(invoice_id) {
		uni.showModal({
			content: '您确定要移除当前发票信息吗?',
			success: function(res) {
				if (res.confirm) {
					del_lnvoice(invoice_id).then(res => {
						uni.showToast({
							title: res.msg,
							icon: "none",
							success() {
								setTimeout(function() {
									get_list();
								}, 1000);
							}
						});
					})
				}
			}
		});
	}

	// 添加发票抬头
	function handleAdd() {
		uni.navigateTo({
			url: '/pages/invoice/info'
		});
	}

	// 编辑抬头
	function handleEdit(invoice_id) {
		uni.navigateTo({
			url: `/pages/invoice/info?invoice_id=${invoice_id}`
		});
	}
	
	// 订单列表提交发票申请
	function save_order(){
		save_order_invoice({ invoice_id: default_invoice.value.invoice_id, order_id: order_id.value }).then(res => {
			let data = res.data;
			list.value = data;
			COMMON.re_back(res)
		})
	}
</script>

<style lang="scss" scoped>
	.invoice_box {
		width: 100%;
		height: 70vh;
		overflow: auto;
		padding: 30rpx;

		.item {
			width: 100%;
			overflow: hidden;
			background-color: #fff;
			border-radius: 10px;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;

			.title {
				overflow: hidden;
				border-bottom: 1px solid #f2f2f2;
				padding-bottom: 20rpx;

				.name {
					font-size: 28rpx;
					font-weight: 600;
					padding-bottom: 10rpx;
					color: #333;
				}

				text {
					font-size: 26rpx;
					color: #666;
				}
			}

			.t_btn {
				width: 100%;
				overflow: hidden;
				display: flex;
				padding-top: 20rpx;

				.items {
					flex: 1;

					.t_check {
						float: left;
					}

					.d_text {
						font-size: 24rpx;
						float: left;
						padding-left: 10rpx;
						padding-top: 3rpx;
						color: #666;
					}

					.iconfont {
						float: right;
						color: #666;
						margin-left: 50rpx;
					}
				}

			}
		}
	}

	.add_btn {
		padding: 30rpx;

		.button {
			background: linear-gradient(to right, #f9211c, #ff6335);
		}

		.gary_bg {
			background: #ccc;
		}

		.mb30 {
			margin-bottom: 30rpx;
		}
	}
</style>